<template>
    <div 
        class="hc-ball-cont pre"
    >
        <!-- 普通选号 type==='basis' -->
        <div 
            class="hc-ball"
            :style="newColorStyle"
            @click="selectball" 
            v-if="type==='basis'">
            <text 
                class="hc-ball-color"
                :style="newTextStyle"
                >{{number}}</text>
        </div>
        <!-- 支持设胆选号 type==='BileCode'  -->
        <div 
            class="hc-ball" 
            :style="newColorStyle"
            @click="selectball" 
            @longpress="longpressd"
            v-else>
            <text 
                class="hc-ball-color"
                :style="newTextStyle"
                >{{number}}</text>
        </div>
        <!-- 胆码图标 -->
        <image class="dan-img" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/dan.png" v-if="danState"></image>
    </div>
</template>
<script>
    const modal = weex.requireModule('modal')

    export default {
        name:'hc-ball',
        props:{
            backgroundColor: { //边框背景色
                type: String,
                default: '#fff'
            },

            borderColor:{ //边框色
                type: String,
                default: '#d5d5d5'
            },

            ballColor:{
                type: String
            },

            ballStyle:{ //组合样式
                type: Object
            },

            number:{    //默认球号码
                type:[Number, String],
                required:true
            },
            type: {
                type:String,
                default:'basis' // 基础类型 basis 托胆 BileCode
            },
            state: {
                type:Boolean,
                default:false  // 球是否选中状态 设置不同样式
            },
            danState:{
                type:Boolean,
                default:false  // 球是否选中状态 设置不同样式
            }
        },

        data(){
            return {
                selectState:false
            }
        },

        
        methods:{
            // 点击选中号码
            selectball() {
                // 抛出选中号码
                this.$emit('castBall', this.number)
            },

            //设胆号码
            longpressd() {
                // 抛出设胆号码
                this.$emit('castLongBall', this.number, 'long')
            }
        },

        computed:{
            newColorStyle() {
                if(this.state || this.danState ) {
                    return {
                        'borderColor':'#E70D0D',
                        'backgroundColor': '#E70D0D' 
                    }
                } else {
                    return {
                        'borderColor':'#d5d5d5',
                        'backgroundColor': '#fff' 
                    }
                     
                }
            },

            newTextStyle() {
                if( !!this.ballColor) return { 'color': this.ballColor }

                if(this.state || this.danState) {
                    return {
                        'color': '#fff'
                    }
                } else {
                    return {
                        'color': '#E70D0D'
                    }
                     
                }
            },

            newBallStyle () {
                const { borderColor, backgroundColor, ballStyle } = this;
                
                return {
                    backgroundColor,
                    borderColor,
                    ...ballStyle
                }
            }
        }
    }
</script>

<style scoped>
.hc-ball-cont {
    width:117px;
    height: 104px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pre {
    position: relative;
}

.dan-img{
    height: 32px;
    width: 32px;
    position: absolute;
    top:6px;
    right:10px;
    z-index: 2;
    opacity: 1;
}

.hc-ball{
    width:88px;
    height: 88px;
    border-radius: 44px;
    display: flex;
    align-items: center;  
    justify-content: center;
    border-style:solid;
    border-width: 1px;
}

.hc-ball-color {
    font-size: 32px;
}



</style>

